<script setup>
import * as echarts from 'echarts'
import chinaMap from '@/assets/china.json'
import { ref, reactive, onMounted } from 'vue'

let chartRef = ref()

onMounted(() => {
    initChart()
})


function initChart() {
    var myChart = echarts.init(chartRef.value);
    echarts.registerMap('china', chinaMap)
    let option = {
        geo: {
            type: 'map',
            map: 'china',
            itemStyle: {
                areaColor: 'none',
                borderColor: '#0380ab',
                borderWidth: 1,
                shadowColor: '#fff',
                shadowBlur: 10
            },
            
            layoutCenter: ['50%', '50%'],
            layoutSize: '100%',
        },
        series: [
                {
                    type: 'effectScatter', // 特效动画
                    coordinateSystem: 'geo',
                    symbolSize: 12,
                    rippleEffect: {
                        scale: 10,
                        brushType: 'stroke'
                    },
                    itemStyle: {
                        color: '#f00'
                    },
                    label: {
                        show: true,
                        position: 'right',
                        formatter: '{b}',
                        color: '#fff'
                    },
                    data: [
                        {
                            name: '宁波',
                            value: [121.56, 29.86]
                        },
                        {
                            name: '海口',
                            value: [110.35, 20.02]
                        },
                        {
                            name: '银川',
                            value: [106.27, 38.47]
                        },
                        {
                            name: '乌鲁木齐',
                            value: [87.61, 43.82]
                        },
                        {
                            name: '呼和浩特',
                            value: [111.65, 40.82]
                        },
                    ]
                }
            ],
    }
    myChart.setOption(option)
}

</script>
<template>
    <div ref="chartRef" style="width: 100%;height:600px;"></div>
</template>

<style lang="less" scoped>
</style>

